<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="bg-white overflow-hidden">
    <!-- 顶部背景区域 -->
    <view
      class="relative w-full h-60 bg-cover bg-center rounded-b-3xl overflow-hidden"
      style="background-image: url('https://kuaidi.trio.pub/upload/uniapp/delivery/sjbj.png')"
    >
      <!-- 头像 -->
      <view
        class="absolute right-4 bottom-0 translate-y-1/2 w-20 h-20 rounded-full bg-gray-200 border-2 border-white"
      >
        <image :src="shopInfo.avatar" class="w-full h-full rounded-full" />
      </view>
    </view>

    <!-- 个人信息区域 -->
    <view class="px-4 pt-4">
      <!-- 名字和服务中心一行 -->
      <view class="flex items-center mb-1">
        <view class="bg-#655CF3 text-white text-xs px-2 py-1 rounded">
          {{ shopInfo.shop_type }}
        </view>
        <view class="text-gray-800 text-lg ml-auto mr-22">{{ shopInfo.shop_name }}</view>
      </view>
      <!-- 地址独占一行 -->
      <view class="text-gray-600 text-sm flex items-center">
        <view class="i-carbon-location mr-1"></view>
        {{ shopInfo.address }}
      </view>
    </view>

    <!-- 虚线分隔 -->
    <view class="mx-4 border-t border-dashed border-gray-300 mt-3 opacity-30"></view>

    <!-- 功能按钮区域 -->
    <view class="grid grid-cols-3 gap-4 p-1">
      <view
        class="aspect-square rounded-lg flex items-center justify-center"
        @click="handleClick('/pages/ExpressCabinet/index')"
      >
        <view class="text-center">
          <image
            src="https://kuaidi.trio.pub/upload/uniapp/delivery/dpj.png"
            alt=""
            class="w-20 h-20"
          />
        </view>
      </view>
      <view
        class="aspect-square rounded-lg flex items-center justify-center"
        @click="handleClick('/pages/receivedItem/index')"
      >
        <view class="text-center">
          <image
            src="https://kuaidi.trio.pub/upload/uniapp/delivery/djj.png"
            alt=""
            class="w-20 h-20"
          />
        </view>
      </view>
      <view
        class="aspect-square rounded-lg flex items-center justify-center"
        @click="handleClick('/pages/openCabinet/index')"
      >
        <view class="text-center">
          <image
            src="https://kuaidi.trio.pub/upload/uniapp/delivery/smkg.jpg"
            alt=""
            class="w-20 h-20 rounded-2"
          />
        </view>
      </view>
    </view>

    <!-- 快递柜列表 -->
    <view class="bg-gray-100 p-4" v-for="item in lockers" :key="item.cabinet_code">
      <view class="text-lg font-bold mb-4">{{ item.building }}</view>

      <!-- 快递柜列表项 -->
      <view class="space-y-3" v-for="item2 in item.cabinets" :key="item2.cabinet_code">
        <view class="bg-white rounded-lg p-4 flex items-center">
          <view class="w-12 h-12 mr-3">
            <view class="w-full h-full bg-orange-100 rounded-full flex items-center justify-center">
              <image
                src="https://kuaidi.trio.pub/upload/uniapp/delivery/box01.png"
                alt=""
                class="w-8 h-8"
              />
            </view>
          </view>
          <view class="flex-1">
            <view class="text-gray-800">{{ item2.floor }}房</view>
            <view class="text-gray-400 text-sm">
              派件:{{ item2.wait_sending }}件 取件:{{ item2.wait_pending }}件
            </view>
          </view>
          <view class="i-carbon-chevron-right text-gray-400"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// 获取屏幕边界到安全区域距离
import { getOrderList, getInfo } from '@/service/index/foo'
import { onLoad } from '@dcloudio/uni-app'
const { safeAreaInsets } = uni.getSystemInfoSync()

const handleClick = (url: string) => {
  uni.navigateTo({
    url,
  })
}
const lockers = ref([])
const fetchLockers = async () => {
  // Check for token before attempting to fetch data
  const token = uni.getStorageSync('token')
  if (!token) {
    // Don't attempt to fetch data when not logged in
    console.log('未登录，跳过获取快递柜列表')
    return
  }

  try {
    const res = await getOrderList({
      page: 1,
      size: 10,
    })
    lockers.value = res.data.map((item) => ({
      ...item,
      deliveryCount: 0,
      pickupCount: 0,
    }))
  } catch (error) {
    console.error('获取快递柜列表失败:', error)
    // uni.showToast({
    //   title: '获取快递柜列表失败',
    //   icon: 'none',
    // })
  }
}
const shopInfo: any = ref({})
const fetchUserInfo = async () => {
  // Check for token before attempting to fetch data
  const token = uni.getStorageSync('token')
  if (!token) {
    // Don't attempt to fetch user data when not logged in
    console.log('未登录，跳过获取用户信息')
    return
  }

  try {
    const res = await getInfo()
    // console.log(res)
    shopInfo.value = res.data.shop_info
    uni.setStorageSync('userInfo', res.data.user_info)
    uni.setStorageSync('shop_info', res.data.shop_info)
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // Only show error toast if there is a token (user should be logged in)
    const currentToken = uni.getStorageSync('token')
    if (currentToken) {
      // uni.showToast({
      //   title: '获取用户信息失败',
      //   icon: 'none',
      // })
    }
  }
}
onLoad(() => {
  // Check login status first
  const token = uni.getStorageSync('token')
  if (!token) {
    console.log('未登录，跳转到登录页')
    uni.reLaunch({
      url: '/pages/login/index',
    })
    return
  }

  // Only fetch data if logged in
  fetchUserInfo()
  fetchLockers()
})
</script>

<style>
.main-title-color {
  color: #d14328;
}
</style>
